<html>
<head>
<title>ListBox Upgrade</title>
<script>
function upgradeSelect()
{ scs=document.getElementsByTagName('select');
for(i=0; i<scs.length; i++)
if(parseInt(scs[i].size)>1)
new KLSelect(scs[i]);
}

function KLSelect(sc)
{ kls=document.createElement('div');
kls.className = sc.className;
for(i=0; i<sc.options.length; i++)
{ with(kls.appendChild(document.createElement('p')))
{ appendChild(document.createTextNode(sc.options[i].firstChild.nodeValue));
if(sc.options[i].selected) className = 'KLOptionSelected';
else className = 'KLOption';
optionValue = sc.options[i].value;
title = firstChild.nodeValue;
attachEvent('onclick',KLOptionClicked);
}
}
sc.parentNode.replaceChild(kls,sc);
}

function KLOptionClicked(e)
{ with(e.srcElement.parentNode)
for(i=0; i<childNodes.length; i++)
childNodes[i].className = 'KLOption';
e.srcElement.className = 'KLOptionSelected';
}
</script>
<style>
.KLSelect
{ width: 125px;
height: 50px;
background: #eeeeee;
border: groove #808080 3px;
font-family: Tahoma, sans-serif;
font-size: 11px;
overflow: auto;
overflow-x: hidden;
}

.KLOption, .KLOptionSelected
{ margin: 0px;
padding: 0px 5px 0px 3px;
width: 100%;
white-space: nowrap;
cursor: pointer;
cursor: hand;
}

.KLOptionSelected
{ background: #303030;
color: #ffffff;

}
</style>
</head>
<body>
<p>Example of emulating select control with division element</p>
<select size="4" name="test" class="KLSelect">
<option value="1" selected>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5 which is pretty darn long </option>
<option value="6">option 6</option>
</select>
<p>
<button onclick="upgradeSelect()"> Replace Select Control</button>
</p>
</body>
</html>